<template>
    <el-dialog title="添加水功能区信息" :visible.sync="dialogFormVisible" width="950px">
        <el-form ref="waterform" :model="waterData" :rules="ruleForm" label-width="135px">
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="riverId" label="河流">
                        <el-select v-model="waterData.riverId" class="select-width" placeholder="请选择河流">
                            <el-option
                  v-for="dict in riverList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="firstfuncarea" label="功能区名称">
                        <el-input v-model="waterData.firstfuncarea" placeholder="请输入功能区名称"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="funclevel" label="功能区级别">
                        <el-select v-model="waterData.funclevel" class="select-width" placeholder="请选择">
                            <el-option v-for="dict in dict.type.function_level" :key="dict.value" :label="dict.label"
                                :value="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="parentfunc" label="所属一级功能区">
                        <el-select v-model="waterData.parentfunc" class="select-width" placeholder="请选择">
                            <el-option v-for="item in regionListLevel1" :key="item.code" :label="item.name"
                                :value="item.code"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="region" label="行政区划">
                        <el-select v-model="waterData.region" class="select-width" placeholder="请选择行政区划">
                            <el-option v-for="item in regionList" :key="item.code" :label="item.name"
                                :value="item.code"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="startlocationx" label="水功能区起点经度">
                        <el-input v-model="waterData.startlocationx" placeholder="请输入水功能区起点经度"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="startlocationy" label="水功能区起点纬度">
                        <el-input v-model="waterData.startlocationy" placeholder="请输入水功能区起点纬度"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="endlocationx" label="水功能区终点经度">
                        <el-input v-model="waterData.endlocationx" placeholder="请输入水功能区终点经度"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="endlocationy" label="水功能区终点纬度">
                        <el-input v-model="waterData.endlocationy" placeholder="请输入水功能区终点纬度"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="waterthirdlevel" label="水资源三级区">
                        <el-input v-model="waterData.waterthirdlevel" placeholder="请输入水资源三级区"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="funclength" label="长度">
                        <el-input placeholder="请输入长度" v-model="waterData.funclength">
                            <template slot="append">（km）</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="waterthirdlevel" label="水质代表断面">
                        <el-input v-model="waterData.waterthirdlevel" placeholder="请输入水质代表断面"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="waterarea" label="湖面面积">
                        <el-input v-model="waterData.waterarea" placeholder="请输入湖面面积"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="zoneaccording" label="区划依据">
                        <el-input v-model="waterData.zoneaccording" placeholder="请输入区划依据"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="purpose" label="水质保护目标">
                        <el-input v-model="waterData.purpose" placeholder="请输入水质保护目标"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="monifrequency" label="监测频次">
                        <el-input v-model="waterData.monifrequency" placeholder="请输入监测频次"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="compliancetimes" label="年达标次数">
                        <el-input v-model="waterData.compliancetimes" placeholder="请输入年达标次数"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>

        </el-form>
        <div class="titleBox">
            <p class="title">拐点坐标</p>
            <el-button type="primary" @click="addPoint">增加</el-button>
        </div>
        <el-row v-for="(point, index) in waterData.spinodalList" :key="index" style="margin: 10px 20px;">
            <el-col :span="7">
                <div class="el-col-item">
                    <span>拐点编号：</span>
                    <el-input class="el-col-inp" v-model="point.pointnum" placeholder="请输入编号"
                        style="width: 100%; "></el-input>
                </div>
            </el-col>
            <el-col :span="7">
                <div class="el-col-item">
                    <span>经度：</span>
                    <el-input class="el-col-inp" v-model="point.longtitute" placeholder="请输入经度"
                        style="width: 100%; "></el-input>
                </div>
            </el-col>
            <el-col :span="7">
                <div class="el-col-item">
                    <span>纬度：</span>
                    <el-input class="el-col-inp" v-model="point.latitute" placeholder="请输入纬度"
                        style="width: 100%; "></el-input>
                </div>
            </el-col>
            <el-col :span="3">
                <el-button type="danger" style="margin-top: -3px;" @click="removePoint(index)">删除</el-button>
            </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureFn">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { getRegionList } from '@/api/dataResources/monitorData/region.js'
import {
    getRiverSelect,
} from "@/api/dataResources/monitorData/section.js";
export default {
    name: 'zonePop',
    dicts: ["sys_region", "zk_intercept_type", "zk_water_gate_type", "zk_water_type", "primary_and_secondary"],
    data() {
        return {
            regionList: [],
            regionListLevel1: [],
            riverList: [],
            waterData: {
                riverId: '',
                firstfuncarea: '', // 功能区域名称
                funclevel: '', // 功能区域级别
                parentfunc: '', // 功能区域父级名称
                parentfuncName: '',
                region: '',
                startlocationx: '',
                startlocationy: '',
                endlocationx: '',
                endLocatony: '',
                waterthirdlevel: '',
                funclength: '',
                mainsegment: '',
                waterarea: '',
                zoneaccording: '',
                purpose: '',
                monifrequency: '',
                compliancetimes: ' ',
                spinodalList: [{
                    pointnum: '',
                    longtitute: '',
                    latitute: ''
                }]
            },
            dialogFormVisible: false,
            ruleForm: {
                riverId: [
                    { required: true, message: '请选择河流', trigger: 'change' }
                ],
                firstfuncarea: [
                    { required: true, message: '请输入功能区名称', trigger: 'blur' }
                ],
                funclevel: [
                    { required: true, message: '请选择功能区级别', trigger: 'change' }
                ],
                parentfunc: [
                    { required: true, message: '请选择所属一级功能区', trigger: 'change' }
                ],
                region: [
                    { required: true, message: '请选择行政区划', trigger: 'change' }
                ],
                startlocationx: [
                    { required: true, message: '请输入水功能区起点经度', trigger: 'blur' }
                ],
                startlocationy: [
                    { required: true, message: '请输入水功能区起点纬度', trigger: 'blur' }
                ],
                endlocationx: [
                    { required: true, message: '请输入水功能区终点经度', trigger: 'blur' }
                ],
                endlocationy: [
                    { required: true, message: '请输入水功能区终点纬度', trigger: 'blur' }
                ],
                waterthirdlevel: [
                    { required: true, message: '请输入水资源三级区', trigger: 'blur' }
                ],
                funclength: [
                    { required: true, message: '请输入长度', trigger: 'blur' }
                ],
                waterarea: [
                    { required: true, message: '请输入湖面面积', trigger: 'blur' }
                ],
                zoneaccording: [
                    { required: true, message: '请输入区划依据', trigger: 'blur' }
                ],
                purpose: [
                    { required: true, message: '请输入水质保护目标', trigger: 'blur' }
                ],
                monifrequency: [
                    { required: true, message: '请输入监测频次', trigger: 'blur' }
                ],
                compliancetimes: [
                    { required: true, message: '请输入年达标次数', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.getRegionList();
        this.getRegionListLevel1();
    },
    methods: {
        //获取所属河流下拉选项数据
        getsshl() {
            getRiverSelect().then((response) => {
                this.riverList = response.data.map((item) => ({
                    value: item.id,
                    label: item.rivername,
                }));
            });
        },

        async getRegionListLevel1() {
            let res = await getRegionList(1);
            if (res.code == 200) {
                this.regionListLevel1 = res.rows;
            }
        },
        async getRegionList() {
            let res = await getRegionList();
            if (res.code == 200) {
                this.regionList = res.rows;
            }
        },
        initFormData() {
            this.dialogFormVisible = true;
        },
        sureFn() {
            this.$refs['waterform'].validate((valid) => {
                if (valid) {
                    this.dialogFormVisible = false;
                    this.$emit('addWater', this.waterData);
                } else {
                    return false;
                }
            });
        },
        addPoint() {
            this.waterData.spinodalList.push({
                pointnum: '',
                longtitute: '',
                latitute: ''
            });
        },
        removePoint(index) {
            this.waterData.spinodalList.splice(index, 1);
            if (this.waterData.spinodalList.length == 0) {
                this.waterData.spinodalList.push({
                    pointnum: '',
                    longtitute: '',
                    latitute: ''
                });
            }
        }
    }
}
</script>
<style scoped>
.select-width {
    width: 100%;

}

.titleBox {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dfe4ed;
    margin: 0 20px 20px 20px;
    position: relative;

    &::before {
        display: block;
        content: "";
        width: 3px;
        height: 16px;
        background: #307eff;
    }

    .title {
        font-size: 16px;
        color: #000;
        position: absolute;
        left: 10px;
        font-weight: 500;
    }
}

.el-col-item {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
}

.el-col-inp {
    width: 160px !important;
}
</style>